<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试Layui文件上传</title>
    <script src="webjars/jquery/3.4.1/jquery.js" type="text/javascript"></script>
    <script src="webjars/layui/2.5.4/layui.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="webjars/layui/2.5.4/css/layui.css">
    <style>
        #div01 {
            border: 1px solid red;
            width: auto;
            height: 600px;
        }
    </style>
</head>
<body>
<div class="layui-upload">
    <button type="button" class="layui-btn" id="test1">上传图片</button>
    <div class="layui-upload-list">
        <img class="layui-upload-img" id="demo1">
        <p id="demoText"></p>
    </div>
</div>

<button type="button" class="layui-btn" onclick="orc()">文字识别</button>

<div id="div01" >

</div>
</body>
<script type="text/javascript">

  //获取到的图片地址
  var imgpath="";
    layui.use('upload', function(){
        var $ = layui.jquery
            ,upload = layui.upload;

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: 'testuploadimg'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）

                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    // return layer.msg('上传失败');
                }
                imgpath=res.data;
                console.log(res.data)
                //上传成功
            }

        });
    });

    //文字识别方法
    function orc() {
        $.ajax({
            type: "post",
            url: "ocr",
            data: {
             "path":imgpath
            },
            dataType: "json",
            success: function (result) {
                // console.log(result)
                var eval1 = eval(result);
                // console.log(result)
                var arry = result.words_result;
                var str = "";
                for (var i = 0; i < arry.length; i++) {
                    console.log(arry[i].words)
                    str += "<span style='font-size: 20px'>" + arry[i].words + "</span>"+"<br/>"
                }

                $("#div01").append(str);

            }


        });
    }
</script>
</html>